<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm">
			<el-form-item>
				<fast-select v-model="state.queryForm.type" dict-type="standard_type" placeholder="请选择数据元" clearable></fast-select>
			</el-form-item>
			<el-form-item>
				<el-input v-model="state.queryForm.cnName" placeholder="请输入名称"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button @click="getDataList" type="primary" :icon="Search">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button :icon="Refresh" @click="resets">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%">
			<el-table-column prop="cnName" label="名称" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column prop="platformIdentifier" label="平台标识符" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="sourceFile" label="来源文件" header-align="center" align="center"></el-table-column>
			<el-table-column prop="sourceIdentifier" label="来源标识符" header-align="center" align="center"></el-table-column>
			<fast-table-column prop="type" label="元数据项" header-align="center" align="center" dictType="standard_type"></fast-table-column>

			<el-table-column prop="createTime" label="操作" header-align="center" align="center" width="165">
				<template #default="scope">
					<el-button type="primary" link @click="getInfo(scope.row.type, scope.row.id)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<StandardEdit ref="standardEditRef"></StandardEdit>
		<Range ref="rangeRef"></Range>
	</el-card>
</template>

<script setup lang="ts">
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import Range from './range.vue'
import StandardEdit from '../data-governance/data-standard/standard-edit.vue'

const state: IHooksOptions = reactive({
	dataListUrl: '/data-governance/data-standard/page',
	queryForm: {
		cnName: '',
		type: '1'
	}
})

const standardEditRef = ref()
const rangeRef = ref()
const getInfo = (type: number, id: string) => {
	switch (type) {
		case 1:
			standardEditRef.value.init(id, true)
			standardEditRef.value.init(id, 1, '', true)
			break
		case 2:
			rangeRef.value.init(id)
			break
	}
}

const resets = () => {
	state.queryForm = {
		cnName: '',
		type: '1'
	}
	state.page = 1
	state.limit = 10

	getDataList()
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle } = useCrud(state)
</script>
